<template>
  <div>
    <h3>有多少周(ISO周)</h3>
    <div>2004年有多少周(ISO周): {{ dayjs('2004-01-01').isoWeeksInYear() }}</div>
    <div>2005年有多少周(ISO周): {{ dayjs('2005-01-01').isoWeeksInYear() }}</div>
    <div>2020年有多少周(ISO周): {{ dayjs('2020-01-01').isoWeeksInYear() }}</div>
    <div>2021年有多少周(ISO周): {{ dayjs('2021-01-01').isoWeeksInYear() }}</div>
    <div>2023年有多少周(ISO周): {{ dayjs('2023-01-01').isoWeeksInYear() }}</div>
    <div>2024年有多少周(ISO周): {{ dayjs('2024-01-01').isoWeeksInYear() }}</div>
    <div>2025年有多少周(ISO周): {{ dayjs('2025-01-01').isoWeeksInYear() }}</div>
    <h3>指定日期是第几周(ISO周)</h3>
    <div>
      2020-01-01是第几周(ISO周): 所属ISO年：{{ dayjs('2020-01-01').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2020-01-01').isoWeek()
      }}
    </div>
    <div>
      2023-01-01是第几周(ISO周): 所属ISO年：{{ dayjs('2023-01-01').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2023-01-01').isoWeek()
      }}
    </div>
    <div>
      2023-01-02是第几周(ISO周): 所属ISO年：{{ dayjs('2023-01-02').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2023-01-02').isoWeek()
      }}
    </div>
    <div>
      2024-01-01是第几周(ISO周): 所属ISO年：{{ dayjs('2024-01-01').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2024-01-01').isoWeek()
      }}
    </div>
    <div>
      2024-01-02是第几周(ISO周): 所属ISO年：{{ dayjs('2024-01-02').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2024-01-02').isoWeek()
      }}
    </div>
    <div>
      2024-05-01是第几周(ISO周): 所属ISO年：{{ dayjs('2024-05-01').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2024-05-01').isoWeek()
      }}
    </div>
    <div>
      2024-04-30是第几周(ISO周): 所属ISO年：{{ dayjs('2024-04-30').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2024-04-30').isoWeek()
      }}
    </div>
    <div>
      2024-04-29是第几周(ISO周): 所属ISO年：{{ dayjs('2024-04-29').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2024-04-29').isoWeek()
      }}
    </div>
    <div>
      2024-05-05是第几周(ISO周): 所属ISO年：{{ dayjs('2024-05-05').isoWeekYear() }} , 所属IOS周：{{
        dayjs('2024-05-05').isoWeek()
      }}
    </div>
    <h3>第N周(ISO周)的开始日期</h3>
    <h4>第1周(ISO周)的开始日期</h4>
    <div>2004第1周开始日期: {{ xIsoWeekStartDate(2004) }}</div>
    <div>2005第1周开始日期: {{ xIsoWeekStartDate(2005) }}</div>
    <div>2023第1周开始日期: {{ xIsoWeekStartDate(2023) }}</div>
    <div>2024第1周开始日期: {{ xIsoWeekStartDate(2024) }}</div>

    <h4>第3周(ISO周)的开始日期</h4>
    <div>2004第3周开始日期: {{ xIsoWeekStartDate(2004, 3) }}</div>
    <div>2005第3周开始日期: {{ xIsoWeekStartDate(2005, 3) }}</div>
    <div>2023第3周开始日期: {{ xIsoWeekStartDate(2023, 3) }}</div>
    <div>2024第3周开始日期: {{ xIsoWeekStartDate(2024, 3) }}</div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'
import isLeapYear from 'dayjs/plugin/isLeapYear'
import isoWeek from 'dayjs/plugin/isoWeek'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs.extend(isoWeeksInYear)
dayjs.extend(isLeapYear)
dayjs.extend(isoWeek)

/**
 * 计算指定年，第n个ios周的开始日期
 * @param year 年
 * @param xWeek 第N周
 */
function xIsoWeekStartDate(year, xWeek = 1) {
  let yearStart = dayjs(year + '-01-01')
  // 获取当前日期是ios周中的周几, 周一是1， 周二是2，以此类推，周日是7
  const weekDayFlag = yearStart.isoWeekday()
  let firstWeekStartDate
  if (weekDayFlag <= 4) {
    // iso第一周的规则，必须包含周四，因此，weekDayFlag小于等于4，则表示1月1日，在周一至周四这个闭区间，所以1月1日就在当前第一周
    firstWeekStartDate = yearStart
  } else {
    // weekDayFlag大于4，说明1月1日在周五到周日这个闭区间，因此1月1日不在当前年的第一周，因此用 `8-weekDayFlag`，计算出与当前年第一周第一天差了多少天，就加上多少天，得到第一周的第一天日期
    firstWeekStartDate = yearStart.add(8 - weekDayFlag, 'day')
  }
  if (xWeek === 1) {
    return firstWeekStartDate.format('YYYY-MM-DD')
  } else {
    return firstWeekStartDate
      .add(xWeek - 1, 'week')
      .startOf('isoWeek')
      .format('YYYY-MM-DD')
  }
}
</script>
